<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="../../assets/logo.png" size="0.48rem" />
      </template>
      <template #right>
        <van-icon
          name="search"
          size="0.48rem"
          color="white"
          @click="$router.push({ path: '/search' })"
        />
      </template>
    </van-nav-bar>

    <div class="main">
      <!-- 频道导航 -->
      <van-tabs
        @click="channelClickFn"
        v-model="active"
        animated
        sticky
        offset-top="1.226667rem"
      >
        <!-- 每次循环都是独立的,使用运行后,代码会产生多个 -->
        <van-tab
          :name="item.id"
          :title="item.name"
          v-for="item in channelList"
          :key="item.id"
        >
          <van-pull-refresh
            v-model="isLoading"
            @refresh="onRefresh"
            offset="10"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <ArticleList :arr="articleList" @re="removeFn"></ArticleList>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>

      <!-- +号小图标 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="show = true"
      />
    </div>

    <!-- 弹出层组件 -->
    <van-popup v-model="show">
      <div class="popup-container">
        <!-- 弹出层的主体区域 -->
        <div class="pop-body">
          <ChannelEdit
            :userChannelList="channelList"
            @closePop="show = false"
            @ccid="ccidFn"
            ref="edit"
          ></ChannelEdit>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  yonghusuoxuanAPI,
  huoquliebiaoAPI,
  buganxingquAPI,
  wenzhangjubaoAPI
} from '@/api'
// 文章列表组件
import ArticleList from './ArticleList.vue'
// 编辑频道组件
import ChannelEdit from './ChannelEdit.vue'

import { toTimeAgo } from '@/utils/date' // 自定义的时间插件

import { MyNotify } from '@/utils/Notify'

const cacheObj = {} // 数据层面缓存对象(网页重新打开-重新缓存)
export default {
  data () {
    return {
      active: 0, // 默认频道选中
      channelId: 0, // 推荐数组
      channelList: [], // 频道数据
      articleList: [], // 文章数组
      loading: false, // 底部加载状态
      finished: false, // 底部是否全部加载完成
      nextTime: null, // 下一页第一条的发布时间
      isLoading: false, // 顶部刷新状态
      show: false // 编辑频道弹出层popup显示与否
    }
  },
  async created () {
    // 用户所选
    const res = await yonghusuoxuanAPI()
    // console.log(res)
    // 获取到的数据弄到本地然后调用getArticleList()
    this.channelList = res.data.data.channels
    this.getArticleList() // 网页打开始先重新请求一次列表
  },

  methods: {
    toTimeAgo, // 封装的事件

    // 获取文章列表
    async getArticleList () {
      // 底部为false证明没有加载更多的情况
      if (cacheObj[this.channelId]?.arr && this.loading === false) {
        // 变量缓存里取值  取到了直接用
        this.articleList = cacheObj[this.channelId].arr
        this.nextTime = cacheObj[this.channelId]?.nextTime // 当前频道下一页id
        this.$nextTick(() => {
          // 滚动条位置
          window.scrollTo(0, cacheObj[this.channelId] ? cacheObj[this.channelId].sTop : 0
          )
        })
      } else {
        // 没找到频道id对应的数组, 去请求并缓存
        const res2 = await huoquliebiaoAPI({
          channelId: this.channelId,
          // this.nextTime为空
          timestamp: this.nextTime
        })
        if (res2.data.data.results.length === 0) {
          this.finished = true
          return // 阻止代码继续向下
        }

        // 数据预处理
        // 后台返回的数据无法直接使用,提前对数据转换
        res2.data.data.results.forEach((obj) => {
          obj.pubdate = this.toTimeAgo(obj.pubdate)
        })
        // 保存到articleList变量上
        // 把第一页和第二页合并起来
        this.articleList = [...this.articleList, ...res2.data.data.results]

        // 页面数据缓存到 变量中
        // 运行后cacheObj[0], 相当于给对象添加个key, 叫0
        // 如果出现在=左边, 就是赋值, 如果单独出现就是取值
        // 因为上来是一个空对象,所有先要给频道ID创建一个新对象
        cacheObj[this.channelId] = {}
        cacheObj[this.channelId].arr = this.articleList

        this.nextTime = res2.data.data.pre_timestamp
        cacheObj[this.channelId].nextTime = res2.data.data.pre_timestamp

        console.log(cacheObj)
        // 底部加载完成
        this.loading = false
        // 顶部刷新
        this.isLoading = false
      }

      // 为了一会getArticleList在触发,key传下一页的时候请求下一页数据
    },

    // 点击频道切换
    // channeId推荐id
    channelClickFn (channeId) {
      // 点击时,把当前页面 window.scrollY 保存到缓存对象上
      cacheObj[this.channelId].sTop = window.scrollY

      // 获取到频道id保存到data上
      this.channelId = channeId

      // this.nextTime = cacheObj[this.channelId]?.nextTime // 当前频道下一页id
      this.articleList = [] // 原来的数据都清空
      this.nextTime = null // 请求第一页的数据

      this.getArticleList()
    },

    // 底部加载更多
    onLoad () {
      // 再调用文章列表的方法
      if (this.articleList.length === 0) {
        // this.loading = false // list组件上来,先加载一边
        return
      }
      this.getArticleList() // 再调用文章列表请求方法
    },
    // 顶部刷新
    onRefresh () {
      this.nextTime = null // 请求第一页的数据
      cacheObj[this.channelId].arr = null // 缓存数据也清空
      cacheObj[this.channelId].nextTime = null // 缓存下一页页码置空
      this.articleList = [] // 原来的数据都清空

      this.getArticleList() // 再次发起文章请求
      console.log(123)
    },

    // 反馈 删除
    async removeFn (item, action) {
      // item文章对象
      /** ********************************************/

      /** *******************前端本地删除**************/
      const index = this.articleList.findIndex((val) => {
        return val.art_id === item.art_id
        // return条件:遍历的文章对象的id和要删除的文章对象的id相同,
        // 停止循环, 直接返回遍历时这个文章对象的索引值
      })
      // 如果找不到就返回-1
      if (index !== -1) {
        this.articleList.splice(index, 1)
      }

      /** ********************************************/

      /** ******************接口调用*******************/
      if (action.name === '不感兴趣') {
        // 不感兴趣
        const res = await buganxingquAPI({
          artId: item.art_id
        })
        console.log(res)
        MyNotify({ type: 'success', message: '反馈成功' })
      } else {
        // 点的是二级面板
        const res = await wenzhangjubaoAPI({
          artId: item.art_id,
          type: action.value // 反馈类型
        })
        console.log(res)
        MyNotify({ type: 'success', message: '反馈成功' })
      }

      // 反馈成功,直接刷新第一页的数据重新加载
      // this.articleList = []
      // this.nextTime = null
      // this.getArticleList()
    },
    // 切换频道
    async ccidFn (obj) {
      // obj频道对象
      // tabs的v-model可以控制默认显示哪一个
      // 默认值确实是索引, 但是tab有name, 默认绑定的是name的值
      // name的值是频道ID
      // 我要给v-model对应的变量赋予频道id
      this.active = obj.id
      this.channelClickFn(obj.id) // 重新获取数据(默认一次点击频道事件)
    }
  },

  components: {
    // 文章列表
    ArticleList,
    ChannelEdit
  },
  beforeRouteLeave (to, from, next) {
    from.meta.top = window.scrollY
    console.log(from)
    next()
  },
  activated () {
    this.$nextTick(() => {
      console.log(this.$route.meta.isScoll)
      if (this.$route.meta.isScoll) {
        console.log(this.$route.meta.top)
        window.scrollTo(0, this.$route.meta.top)
      }
    })
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 50px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 65px;
  right: 8px;
  z-index: 999;
}
// 弹出层容器宽度高度铺满屏幕
/*频道编辑弹出层 */
.van-popup {
  width: 100%;
  height: 100%;
}
</style>
